<template>
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <header class="header">
      <BackBtn />
      <h1>活动成果详情</h1>
      <Time />
    </header>

    <div class="main-content">
      <div class="info-card" v-loading="loading" element-loading-text="加载中..." :element-loading-background="'rgba(0, 0, 0, 0)'" :class="{ 'zoomed': isZoomed }">
        <!-- 添加图钉装饰 -->
        <div class="pin" @click="toggleZoom" style="user-select: none; cursor: pointer;">
          <div class="pin-head"></div>
          <div class="pin-shadow"></div>
        </div>

        <h2 class="section-title">活动成果详情</h2>
        <div class="info-section">
          <div class="info-item">
            <span class="label">标题：</span>
            <span class="value">{{ outcomeData.title }}</span>
          </div>
          <div class="info-item">
            <span class="label">作者：</span>
            <span class="value">{{ outcomeData.author }}</span>
          </div>
          <div class="info-item">
            <span class="label">发布时间：</span>
            <span class="value">{{ outcomeData.createdAt }}</span>
          </div>
          <div class="info-item">
            <span class="label">摘要：</span>
            <span class="value">{{ outcomeData.summary }}</span>
          </div>
          <div class="info-item full-width">
            <span class="label">活动描述：</span>
            <div class="value description">{{ outcomeData.introduction }}</div>
          </div>
        </div>

        <!-- 图片展示区域 -->
        <div class="image-section">
          <h3 class="image-title">图片：</h3>
          <div class="image-list">
            <template v-if="hasImages">
              <template v-for="i in 8" :key="i">
                <div class="image-wrapper" v-if="outcomeData[`image${i}`]">
                  <a :href="outcomeData[`image${i}`]" download :title="`图片${i}`">
                    <div class="image-item">
                      <img :src="outcomeData[`image${i}`]" :alt="`图片${i}`">
                      <div class="image-name">图片{{i}}.jpg</div>
                    </div>
                  </a>
                </div>
              </template>
            </template>
            <div v-else class="no-images">
              暂无图片
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getOutcomeDetail } from '@/api/outcomes'
import Time from '@/components/Time.vue'
import BackBtn from '@/components/Back-btn.vue'

const route = useRoute()
const router = useRouter()
const loading = ref(false)
const outcomeData = ref({})
const isZoomed = ref(false)

// 添加计算属性判断是否有图片
const hasImages = computed(() => {
  return [1, 2, 3, 4, 5, 6, 7, 8].some(i => outcomeData.value[`image${i}`])
})

// 切换缩放状态的方法
const toggleZoom = () => {
  isZoomed.value = !isZoomed.value
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const parts = timeStr.split('-')
  if (parts.length >= 5) {
    const date = parts.slice(0, 3).join('-')
    const time = parts.slice(3, 5).join(':')
    return `${date} ${time}`
  }
  return timeStr
}

// 获取活动成果详情数据
const fetchOutcomeDetail = async () => {
  try {
    loading.value = true
    const id = route.params.oid
    const res = await getOutcomeDetail(id)
    if (res.code === 200) {
      // 处理时间格式
      const data = { ...res.data }
      data.createdAt = formatTime(data.createdAt)
      outcomeData.value = data
    }
  } catch (error) {
    console.error('获取活动成果详情失败：', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchOutcomeDetail()
})
</script>

<style scoped>
@import '@/assets/css/header/index.css';
@import '@/assets/css/activity/info.css';
@import '@/assets/css/activity/pin.css';
.info-card {
  position: relative;
  padding: 30px;
  border-radius: 12px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  width: 1200px;
  margin: 20px auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}


</style> 